<template>
  <BasicTable @register="registerTable" @resize-column="handleResizeColumn">
    <template #toolbar> </template>
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'curNum'">
        <Input v-model:value="record[column.key]" />
      </template>
    </template>
    <template #action="{ record }">
      <TableAction
        :actions="[
          {
            icon: 'clarity:note-edit-line',
            tooltip: '修改',
            onClick: handleEdit.bind(null, record),
            ifShow: () => !!record.id,
          },
          {
            icon: 'ant-design:delete-outlined',
            color: 'error',
            popConfirm: {
              title: '是否确认删除',
              confirm: handleDelete.bind(null, record),
            },
          },
        ]"
      />
    </template>
  </BasicTable>
</template>
<script lang="ts">
  import { defineComponent, onMounted, ref } from 'vue';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { useTabs } from '/@/hooks/web/useTabs';
  import { useRouter } from 'vue-router';
  import { BasicColumn } from '/@/components/Table';
  import {
    getPaperListPaperNoValue,
    getPaperUpdatePaperNoValue,
    getPaperDelPaperNoValue,
  } from '/@/api/flowManage/flowManage';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { Input } from 'ant-design-vue';

  export default defineComponent({
    name: 'OfficialDocumentNumberView',
    components: { BasicTable, TableAction, Input },
    setup() {
      const { createMessage } = useMessage();
      const { setTitle } = useTabs();
      const { currentRoute } = useRouter();

      const title = '文号管理';
      onMounted(async () => {
        if (currentRoute.value?.query?.title) {
          const newTitle = `${title}-` + currentRoute.value?.query?.title;
          setTitle(`${newTitle}`);
          setProps({ title: newTitle });
        }
      });
      const columns: BasicColumn[] = [
        {
          title: '年份',
          dataIndex: 'curYear',
        },
        {
          title: '值',
          dataIndex: 'curNum',
          key: 'curNum',
        },
      ];
      const [registerTable, { reload, setProps }] = useTable({
        title,
        api: getPaperListPaperNoValue,
        columns,
        formConfig: {
          labelWidth: 120,
          schemas: [],
        },
        searchInfo: {
          op: 'search',
        }, //额外的参数
        useSearchForm: false,
        showTableSetting: true,
        bordered: true,
        indexColumnProps: { width: 50 },
        showIndexColumn: true,
        beforeFetch: (info) => {
          info.prefixId = currentRoute.value?.query?.prefixId;
          return info;
        },
        actionColumn: {
          width: 120,
          title: '操作',
          dataIndex: 'action',
          slots: { customRender: 'action' },
          fixed: 'right',
        },
        rowKey: 'id',
      });

      const handleEdit = async (record) => {
        console.log('record', record);
        await getPaperUpdatePaperNoValue(record);
        handleSuccess();
        createMessage.success('操作成功');
      };

      async function handleDelete(record: Recordable) {
        await getPaperDelPaperNoValue({ id: record.id }).then(() => {
          handleSuccess();
          createMessage.success('操作成功');
        });
      }

      function handleSuccess() {
        reload();
      }
      onMounted(() => {});
      return {
        registerTable,
        handleDelete,
        handleSuccess,
        handleEdit,
        handleResizeColumn: (w, col) => {
          col.width = w;
        },
      };
    },
  });
</script>
